<template>
  <div class="boss">
    <div class="box">
      <table class="tbody">
        <thead class="thead">
          <th>序号</th>
          <th>大棚名称</th>
          <th>温度</th>
          <th>湿度</th>
          <th>光照强度</th>
          <th>土壤水分</th>
          <th>当前状态</th>
          <th>备注</th>
        </thead>
        <tbody>
          <tr
            class="tr"
            v-for="(item, index) in criticalArr"
            :key="item.id"
            @click="jump(item.id)"
          >
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.temp }}℃</td>
            <td>{{ item.humidity }}%</td>
            <td>{{ item.tdght }}lux</td>
            <td>{{ item.moisture }}%</td>
            <td :class="item.state | filterB">{{ item.state | filterA }}</td>
            <td>{{ item.note }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    criticalArr: {
      type: Array,
      default() {
        return [
          {
            id: 1,
            name: "西瓜棚",
            temp: 36,
            humidity: 72,
            tdght: 70,
            moisture: 60,
            state: "1",
            note: "",
          },
        ];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    jump(id) {
      this.$router.push("/layout/detail?id=" + id);
    },
  },
  filters: {
    filterA: function (value) {
      if (value == 1) {
        return "正常";
      } else if (value == 2) {
        return "处理中";
      } else if (value == 3) {
        return "异常";
      }
    },
    filterB: function (value) {
      if (value == 1) {
        return "normal";
      } else if (value == 2) {
        return "processing";
      } else if (value == 3) {
        return "abnormal";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.boss {
  height: 311px;
  padding: 13px 24px;
  text-align: center;

  .box {
    height: 100%;
    overflow: auto;
  }
  .box::-webkit-scrollbar {
    width: 5px;
    height: 100%;
  }
  .box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #9b9da0;
  }
  .box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: #f2f6fa;
  }
}
.tbody {
  width: 100%;

  tbody {
    .normal {
      color: #1ecab7;
    }
    .processing {
      color: #4e7af4;
    }
    .abnormal {
      color: #f48483;
    }
  }
  .tr {
    height: 36px;
    line-height: 36px;
    border-bottom: #eff3f9 2px solid;
    font-size: 14px;
    color: #7387a3;
    cursor: pointer;
  }
  .tr:hover {
    background-color: #eff3f9;
  }
}
.thead {
  height: 34px;
  line-height: 34px;
  background-color: #eff3f9;
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 16px;
  color: #415276;
  font-weight: 600;
}
</style>